import React, {useState} from 'react'

import {Menu, List, Avatar, Tag} from 'antd'

import {MailOutlined} from '@ant-design/icons'

import {Container} from './style'

function Notice(){
    const [noticeType, setNoticeType] = useState('1')
    const noticeList = [
        {
          title: '您的账号存在风险',
        },
        {
          title: '版本重大升级',
        },
        {
          title: '九月重阳，情回故里',
        },
        {
          title: '系统消息',
        },
      ]
      const msgList = [
        {
            title: '陈萍萍 评论了你',
            content: '[8:29] 你是傻逼吧'
          },
          {
            title: '及你太美 点赞了你',
            content: '[8:29] 你是傻逼吧'
          },
          {
            title: '花儿为什么那么红 点赞了你',
            content: '[8:29] 你是傻逼吧'
          },
          {
            title: '你是来拉*的吧 评论了你',
            content: '[8:29] 你是傻逼吧'
          },
    ]
    const waitList = [
        {
            title: '计划一件事情',
            content: '计划在明天完成'
        },
        {
            title: '计划一件事情',
            content: '计划在明天完成'
        },{
            title: '计划一件事情',
            content: '计划在明天完成'
        },{
            title: '计划一件事情',
            content: '计划在明天完成'
        },{
            title: '计划一件事情',
            content: '计划在明天完成'
        },
    ]
    return (
        <Container>
            <Menu
                style={{ width: 256 }}
                defaultSelectedKeys={[noticeType]}
                mode="inline"
                theme="light"
                onClick={(e) => setNoticeType(e.key)}
            >
                <Menu.Item key="1">
                    通知
                </Menu.Item>
                <Menu.Item key="2">
                    消息
                </Menu.Item>
                <Menu.Item key="3">
                    待办
                </Menu.Item>
            </Menu>
            <div className="content">
                {
                    noticeType === '1' ? 
                    <List
                        itemLayout="horizontal"
                        dataSource={noticeList}
                        renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                            avatar={<Avatar style={{ backgroundColor: '#fe5d58' }} icon={<MailOutlined />} />}
                            title={item.title}
                            description="3年前"
                            />
                        </List.Item>
                        )}
                    /> : 
                    noticeType === '2' ? 
                    <List
                        itemLayout="horizontal"
                        dataSource={msgList}
                        renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                            title={item.title}
                            description={item.content}
                            />
                        </List.Item>
                        )}
                    /> : 
                    noticeType === '3' ? 
                    <List
                        itemLayout="horizontal"
                        dataSource={waitList}
                        renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                            title={item.title}
                            description={item.content}
                            />
                            <div>
                                <Tag color="red">马上到期</Tag>
                            </div>
                        </List.Item>
                        )}
                    /> : ''
                }
            </div>
        </Container>
    )
}

export default Notice